<template>
  <div>
    <div class="title">当天护栏碰撞情况</div>
    <div class="content-container" ref="chartLine"></div>
  </div>
</template>

<script>
  import $ from 'jquery';
  import _ from 'lodash';
  import highcharts from 'highcharts';

  import * as Constant from './common/Constant';
  import highchartConfig  from './chartConfig/HighchartConfig';
  import testData from './common/TestData';

  export default {
    name: 'CollisionDay',
    data() {
      return {
        chartDataLine: {},
        chartLine:null,
      }
    },
    computed: {},
    methods: {
      updateChart(){
        let me = this;
        if(!this.chartLine){
          this.chartLine = highcharts.chart(this.$refs.chartLine, this.chartDataLine)
        }else{
          this.chartLine.series[0].setData(this.chartDataLine.series[0].data)
        }
        setTimeout(me.getData, Constant.INTERVAL*1000)
      },
      getData(){
        let me = this;

        let configDataLine = {
          name: '当天护栏碰撞情况',
          legend: ['振动变化'],
          time: [],
          data: [],
          colors:['#56D9FF'],
          showLegend: false,
        };

        if(Constant.LOCAL){
          let data = [{"location":"1","data":[{"location":1,"timeStamp":1529997111502,"port":80},{"location":1,"timeStamp":1529997481534,"port":80},{"location":1,"timeStamp":1529997721555,"port":80},{"location":1,"timeStamp":1529998001579,"port":80}],"count":4},{"location":"2","data":[{"location":2,"timeStamp":1529998481621,"port":80}],"count":1},{"location":"3","data":[{"location":3,"timeStamp":1529997221512,"port":80},{"location":3,"timeStamp":1529997421529,"port":80},{"location":3,"timeStamp":1529997691552,"port":80}],"count":3},{"location":"4","data":[{"location":4,"timeStamp":1529997121503,"port":80},{"location":4,"timeStamp":1529998311606,"port":80}],"count":2},{"location":"5","data":[{"location":5,"timeStamp":1529997611545,"port":80}],"count":1},{"location":"6","data":[{"location":6,"timeStamp":1529998261602,"port":80}],"count":1},{"location":"7","data":[{"location":7,"timeStamp":1529997871568,"port":80},{"location":7,"timeStamp":1529998051583,"port":80},{"location":7,"timeStamp":1529998491622,"port":80}],"count":3},{"location":"9","data":[{"location":9,"timeStamp":1529998171594,"port":80},{"location":9,"timeStamp":1529998531625,"port":80}],"count":2},{"location":"10","data":[{"location":10,"timeStamp":1529997261515,"port":80},{"location":10,"timeStamp":1529998101588,"port":80}],"count":2},{"location":"11","data":[{"location":11,"timeStamp":1529997241513,"port":80},{"location":11,"timeStamp":1529998091587,"port":80},{"location":11,"timeStamp":1529998121589,"port":80}],"count":3},{"location":"13","data":[{"location":13,"timeStamp":1529997101501,"port":80}],"count":1},{"location":"15","data":[{"location":15,"timeStamp":1529997771559,"port":80}],"count":1},{"location":"18","data":[{"location":18,"timeStamp":1529998371619,"port":80},{"location":18,"timeStamp":1529998621633,"port":80}],"count":2},{"location":"19","data":[{"location":19,"timeStamp":1529998221597,"port":80},{"location":19,"timeStamp":1529998731642,"port":80}],"count":2},{"location":"20","data":[{"location":20,"timeStamp":1529997811563,"port":80},{"location":20,"timeStamp":1529998071585,"port":80}],"count":2},{"location":"21","data":[{"location":21,"timeStamp":1529997751557,"port":80},{"location":21,"timeStamp":1529998241600,"port":80}],"count":2},{"location":"22","data":[{"location":22,"timeStamp":1529997071499,"port":80},{"location":22,"timeStamp":1529997251514,"port":80},{"location":22,"timeStamp":1529997541539,"port":80}],"count":3},{"location":"23","data":[{"location":23,"timeStamp":1529997181508,"port":80},{"location":23,"timeStamp":1529997391526,"port":80},{"location":23,"timeStamp":1529998161592,"port":80},{"location":23,"timeStamp":1529998291604,"port":80}],"count":4},{"location":"24","data":[{"location":24,"timeStamp":1529997041496,"port":80},{"location":24,"timeStamp":1529997911571,"port":80},{"location":24,"timeStamp":1529997941574,"port":80}],"count":3},{"location":"25","data":[{"location":25,"timeStamp":1529998571629,"port":80}],"count":1},{"location":"26","data":[{"location":26,"timeStamp":1529997081499,"port":80},{"location":26,"timeStamp":1529997881569,"port":80},{"location":26,"timeStamp":1529998131592,"port":80},{"location":26,"timeStamp":1529998441617,"port":80},{"location":26,"timeStamp":1529998461619,"port":80}],"count":5},{"location":"27","data":[{"location":27,"timeStamp":1529997821564,"port":80},{"location":27,"timeStamp":1529997981577,"port":80}],"count":2},{"location":"28","data":[{"location":28,"timeStamp":1529997161506,"port":80},{"location":28,"timeStamp":1529998721642,"port":80}],"count":2},{"location":"30","data":[{"location":30,"timeStamp":1529997551540,"port":80},{"location":30,"timeStamp":1529997631550,"port":80},{"location":30,"timeStamp":1529998201596,"port":80}],"count":3},{"location":"31","data":[{"location":31,"timeStamp":1529997861567,"port":80},{"location":31,"timeStamp":1529998061584,"port":80}],"count":2},{"location":"32","data":[{"location":32,"timeStamp":1529997641548,"port":80},{"location":32,"timeStamp":1529998391613,"port":80}],"count":2},{"location":"33","data":[{"location":33,"timeStamp":1529997891570,"port":80}],"count":1},{"location":"34","data":[{"location":34,"timeStamp":1529997681551,"port":80},{"location":34,"timeStamp":1529997701553,"port":80},{"location":34,"timeStamp":1529998681638,"port":80}],"count":3},{"location":"35","data":[{"location":35,"timeStamp":1529997131504,"port":80}],"count":1},{"location":"36","data":[{"location":36,"timeStamp":1529997471533,"port":80},{"location":36,"timeStamp":1529998651635,"port":80},{"location":36,"timeStamp":1529998691640,"port":80}],"count":3},{"location":"37","data":[{"location":37,"timeStamp":1529997061498,"port":80}],"count":1},{"location":"38","data":[{"location":38,"timeStamp":1529997921572,"port":80},{"location":38,"timeStamp":1529998431616,"port":80}],"count":2},{"location":"40","data":[{"location":40,"timeStamp":1529997581543,"port":80}],"count":1},{"location":"41","data":[{"location":41,"timeStamp":1529997351522,"port":80},{"location":41,"timeStamp":1529998411615,"port":80}],"count":2},{"location":"42","data":[{"location":42,"timeStamp":1529998021581,"port":80},{"location":42,"timeStamp":1529998401614,"port":80}],"count":2},{"location":"43","data":[{"location":43,"timeStamp":1529997301518,"port":80},{"location":43,"timeStamp":1529998521624,"port":80}],"count":2},{"location":"45","data":[{"location":45,"timeStamp":1529998471620,"port":80}],"count":1},{"location":"47","data":[{"location":47,"timeStamp":1529998011580,"port":80},{"location":47,"timeStamp":1529998541626,"port":80}],"count":2},{"location":"48","data":[{"location":48,"timeStamp":1529998631634,"port":80}],"count":1},{"location":"49","data":[{"location":49,"timeStamp":1529997801562,"port":80},{"location":49,"timeStamp":1529998421616,"port":80}],"count":2},{"location":"50","data":[{"location":50,"timeStamp":1529997651558,"port":80}],"count":1},{"location":"51","data":[{"location":51,"timeStamp":1529998271603,"port":80}],"count":1},{"location":"52","data":[{"location":52,"timeStamp":1529998081586,"port":80}],"count":1},{"location":"53","data":[{"location":53,"timeStamp":1529997231515,"port":80},{"location":53,"timeStamp":1529998381612,"port":80},{"location":53,"timeStamp":1529998661636,"port":80}],"count":3},{"location":"54","data":[{"location":54,"timeStamp":1529997201510,"port":80},{"location":54,"timeStamp":1529997741557,"port":80},{"location":54,"timeStamp":1529998041583,"port":80},{"location":54,"timeStamp":1529998361610,"port":80},{"location":54,"timeStamp":1529998591630,"port":80}],"count":5},{"location":"56","data":[{"location":56,"timeStamp":1529997031524,"port":80},{"location":56,"timeStamp":1529997901570,"port":80}],"count":2},{"location":"57","data":[{"location":57,"timeStamp":1529997171507,"port":80},{"location":57,"timeStamp":1529997591544,"port":80},{"location":57,"timeStamp":1529997851566,"port":80}],"count":3},{"location":"58","data":[{"location":58,"timeStamp":1529997311519,"port":80},{"location":58,"timeStamp":1529997501536,"port":80},{"location":58,"timeStamp":1529998341609,"port":80}],"count":3},{"location":"59","data":[{"location":59,"timeStamp":1529997831564,"port":80}],"count":1},{"location":"60","data":[{"location":60,"timeStamp":1529997281517,"port":80},{"location":60,"timeStamp":1529998191596,"port":80}],"count":2},{"location":"61","data":[{"location":61,"timeStamp":1529997661550,"port":80},{"location":61,"timeStamp":1529998151593,"port":80}],"count":2},{"location":"62","data":[{"location":62,"timeStamp":1529997491535,"port":80},{"location":62,"timeStamp":1529997521538,"port":80}],"count":2},{"location":"63","data":[{"location":63,"timeStamp":1529997451531,"port":80},{"location":63,"timeStamp":1529997931573,"port":80},{"location":63,"timeStamp":1529998701640,"port":80}],"count":3},{"location":"65","data":[{"location":65,"timeStamp":1529998231603,"port":80}],"count":1},{"location":"66","data":[{"location":66,"timeStamp":1529998561628,"port":80}],"count":1},{"location":"67","data":[{"location":67,"timeStamp":1529997141505,"port":80}],"count":1},{"location":"69","data":[{"location":69,"timeStamp":1529998211597,"port":80},{"location":69,"timeStamp":1529998251601,"port":80}],"count":2},{"location":"70","data":[{"location":70,"timeStamp":1529997361523,"port":80},{"location":70,"timeStamp":1529997991578,"port":80},{"location":70,"timeStamp":1529998671637,"port":80}],"count":3},{"location":"71","data":[{"location":71,"timeStamp":1529998281607,"port":80},{"location":71,"timeStamp":1529998581629,"port":80}],"count":2},{"location":"73","data":[{"location":73,"timeStamp":1529997431530,"port":80}],"count":1},{"location":"74","data":[{"location":74,"timeStamp":1529997051497,"port":80},{"location":74,"timeStamp":1529997461532,"port":80},{"location":74,"timeStamp":1529998501622,"port":80}],"count":3},{"location":"75","data":[{"location":75,"timeStamp":1529997561541,"port":80},{"location":75,"timeStamp":1529998601631,"port":80}],"count":2},{"location":"77","data":[{"location":77,"timeStamp":1529997531538,"port":80}],"count":1},{"location":"78","data":[{"location":78,"timeStamp":1529997381525,"port":80},{"location":78,"timeStamp":1529997511537,"port":80},{"location":78,"timeStamp":1529997711554,"port":80},{"location":78,"timeStamp":1529998641635,"port":80}],"count":4},{"location":"79","data":[{"location":79,"timeStamp":1529997211511,"port":80},{"location":79,"timeStamp":1529997601544,"port":80},{"location":79,"timeStamp":1529997671551,"port":80},{"location":79,"timeStamp":1529998351609,"port":80}],"count":4},{"location":"80","data":[{"location":80,"timeStamp":1529998301605,"port":80},{"location":80,"timeStamp":1529998451618,"port":80}],"count":2},{"location":"81","data":[{"location":81,"timeStamp":1529997091500,"port":80},{"location":81,"timeStamp":1529997151505,"port":80},{"location":81,"timeStamp":1529998711641,"port":80}],"count":3},{"location":"82","data":[{"location":82,"timeStamp":1529997331521,"port":80},{"location":82,"timeStamp":1529998111602,"port":80}],"count":2},{"location":"83","data":[{"location":83,"timeStamp":1529997411529,"port":80},{"location":83,"timeStamp":1529997961576,"port":80},{"location":83,"timeStamp":1529998321607,"port":80}],"count":3},{"location":"85","data":[{"location":85,"timeStamp":1529997441531,"port":80},{"location":85,"timeStamp":1529998181595,"port":80},{"location":85,"timeStamp":1529998551627,"port":80}],"count":3},{"location":"87","data":[{"location":87,"timeStamp":1529997341522,"port":80},{"location":87,"timeStamp":1529997401527,"port":80}],"count":2},{"location":"88","data":[{"location":88,"timeStamp":1529997571542,"port":80}],"count":1},{"location":"90","data":[{"location":90,"timeStamp":1529997951575,"port":80}],"count":1},{"location":"91","data":[{"location":91,"timeStamp":1529997371524,"port":80},{"location":91,"timeStamp":1529997731556,"port":80}],"count":2},{"location":"92","data":[{"location":92,"timeStamp":1529997191509,"port":80},{"location":92,"timeStamp":1529997761558,"port":80},{"location":92,"timeStamp":1529997971577,"port":80}],"count":3},{"location":"93","data":[{"location":93,"timeStamp":1529998141591,"port":80}],"count":1},{"location":"94","data":[{"location":94,"timeStamp":1529997291518,"port":80},{"location":94,"timeStamp":1529998611632,"port":80}],"count":2},{"location":"95","data":[{"location":95,"timeStamp":1529997621546,"port":80}],"count":1},{"location":"96","data":[{"location":96,"timeStamp":1529997781560,"port":80},{"location":96,"timeStamp":1529997841565,"port":80},{"location":96,"timeStamp":1529998511623,"port":80}],"count":3},{"location":"97","data":[{"location":97,"timeStamp":1529997271516,"port":80},{"location":97,"timeStamp":1529997321520,"port":80},{"location":97,"timeStamp":1529998331608,"port":80}],"count":3},{"location":"98","data":[{"location":98,"timeStamp":1529997791561,"port":80}],"count":1},{"location":"100","data":[{"location":100,"timeStamp":1529998031582,"port":80}],"count":1}]
          configDataLine.time = _.map(data, "location");
          configDataLine.data = [_.map(data, "count")];
          me.chartDataLine = highchartConfig.getLineConfig(configDataLine);
          me.updateChart();
        }else{
          $.get(Constant.HOST+'fiber/getVibraInfoForDay',function(data){
            configDataLine.time = _.map(data, "location");
            configDataLine.data = [_.map(data, "count")];
            me.chartDataLine = highchartConfig.getLineConfig(configDataLine);
            me.updateChart();
          }).fail(()=>{
            setTimeout(me.getData, Constant.INTERVAL*1000)
          })
        }
      }
    },
    mounted() {
      this.getData();
    },
    created() {

    }
  }
</script>

<style lang="stylus" scoped>
  .content-container
    margin-top: 20px
</style>
